<template>
	<div class="dataScope-container">
		<div class="btn-group">
			<el-button type="primary" icon="el-icon-plus" @click="onClickAdd">{{ translate('button.add') }}</el-button>
			<el-button icon="el-icon-delete" type="danger" @click="onDelete" plain>{{ translate('button.delete') }}
			</el-button>
		</div>
		<base-table row-key="tid"
					height="calc(100vh - 360px)"
					:data="data"
					:checked="checkedData"
					:option="tableOption"
					:loading="loading"
					:filter-enable="true"
					@select="getSelect"
					@pageChange="pageChange">

			<!--操作按钮插槽-->
			<template slot="table-slot-action" slot-scope="scope">
				<el-link type="success" @click="detail(scope)">
					{{ translate('button.detail') }}
				</el-link>
				<el-link type="primary" @click="edit(scope)" v-if="scope.row.status==='0'">
					{{ translate('button.edit') }}
				</el-link>
				<el-link type="danger" @click="del(scope)" v-if="scope.row.status==='0'">
					{{ translate('button.delete') }}
				</el-link>
			</template>
		</base-table>
	</div>
</template>
<script lang="ts">
// 框架基础包
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import ResponseModel from '@/common/model/response.model';
import RequestModel from "@/common/model/request.model";

// 系统组件、通用组件包
import {AlignEnum, ColumnTypeEnum, FixedEnum, SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";
import BaseTableOptionModel from "@/components-sys/base-table/model/base-table-option.model";
import BaseTable from '@/components-sys/base-table/base-table.vue';
import PagesModel from "@/components-sys/pages/pages.model";
import LoadingModel from "@/components-sys/loading-directive/loading.model";

//业务组件
import DataScopeModel from "./model/data-scope.model";
import DataScopeService from "./data-scope.service";

@Component({components: {BaseTable}})
export default class DataScope extends BaseVue {
	/*表格加载状态*/
	private loading: boolean | LoadingModel = false;
	/*表格请求参数*/
	private tableParams: RequestModel = new RequestModel();
	/*表格配置*/
	private tableOption: BaseTableOptionModel = new BaseTableOptionModel();
	/*表格数据*/
	private data: ResponseModel = new ResponseModel<DataScopeModel>();
	/*已勾选的数据*/
	private checkedData: DataScopeModel[] = [];

	/*
	 *生命周期created
	 */
	private created() {
		/*配置表格的列*/
		this.tableOption.selection = SelectionEnum.checkbox;
		this.tableOption.stripe = true;
		this.tableOption.column = [
			{label: '序号', prop: 'index', width: 70, type: ColumnTypeEnum.index, align: AlignEnum.center},
			{label: '数据权限名称', prop: 'name', width: 270, sortable: true},
			{label: '显示顺序', prop: 'sort', width: 150, sortable: true},
			{label: '备注', prop: 'remark'},
			{label: '操作', prop: 'action', width: 150, fixed:FixedEnum.right, type: ColumnTypeEnum.slot},
		]
	};

	/*
	 *生命周期mounted
	 */
	private mounted() {
		this.findDataScopeByPage();
	};

	/**
	 * 获取列表
	 */
	private findDataScopeByPage() {
		this.loading = true;
		DataScopeService.findDataScopeByPage(this.tableParams).then((res: ResponseModel) => {
			if (res.status === 200) {
				this.data = res;
			}
		}).finally(() => {
			this.loading = false;
		})
	};


	private onClickAdd() {
	}

	private onDelete() {
	}

	/**
	 * 表格勾选数据
	 */
	//
	private getSelect(val) {
		console.log(val)
		this.checkedData = val
	};

	/**
	 * 每页条数切换
	 */
	private sizeChange(val: PagesModel) {

	}

	/**
	 * 翻页
	 */
	private pageChange(val: PagesModel) {

	}
};
</script>
<style lang="scss" scoped>
.dataScope-container {
	.btn-group {
		margin-bottom: 20px;
	}
}
</style>
